<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../../hy/common.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>车间信息</title>
<style type="text/css">
	table tr td {
		height: 50px;
	}
</style>
<script type="text/javascript">
	$(function() {
		var selectArr = new Array()
		 $.ajax({
    	    url: '${pageContext.request.contextPath }/report/selectItem2.do',
            type:"POST",
            dataType:'json',
            async : false,
            success:function(data){
           	 selectArr = data
            }
        })

		 //时间控件	
	    $(".form_datetime").datetimepicker({
	   	 startDate: new Date(),
		 format: "yyyy-mm-dd",
		 autoclose: true,
		 todayBtn: true,
		 todayHighlight: true,
		 showMeridian: true,
		 pickerPosition: "bottom-left",
		 language: 'zh-CN',//中文，需要引用zh-CN.js包
		 initialDate:new Date(),
		 startView: 2,//月视图
		 minView: 2//日期时间选择器所能够提供的最精确的时间选择视图
		 });
		 
		//初始化时间
	    $("#createTime").datetimepicker("setDate", new Date());
		 
		//初始化
	    let $table = $('#table');
	    let $add = $('#add');
	    let $getTableData = $('#getTableData');
	    let $save = $('#save');
	    
        //新增一行
	    $add.click(function() {
	        $table.bootstrapTable('insertRow', {
	            index: 0,
	            row: {
	            	remark: '',
	            	cid:'',
	            	money: ''
	            }
	        });
	    });
        
	    $getTableData.click(function() {
	        alert(JSON.stringify($table.bootstrapTable('getData')));
	    });
	    
        
        //保存
	    $save.click(function() {
	    	var data = $table.bootstrapTable('getData');
	    	var affact = 0;
	    	var remark;
	    	var item;
	    	var money;
	    	var createTime = $("#createTime").val();
	    	for(var i = 0; i < data.length; i++) {
	    		remark = data[i].remark
	    		cid = data[i].cid
	    		money = data[i].money
	    		
	    		if(money != "" && money != undefined && money != null) {
	    			$.ajax({
		        	    url: '${pageContext.request.contextPath }/report/insert.do',
		                type:"POST",
		                async : false,
		                data : {remark:remark,money:money,createTime:createTime,cid:cid},
		                success:function(result){
		                	if(result > 0) {
		                		affact = affact + 1;
		                	}
		                }
		            });
	    		}
    		}
	    	
	    	if(affact > 0) {
	    		 toastr.success("保存成功"); 
	    		 setTimeout(function(){  //使用  setTimeout（）方法设定定时3000毫秒
						window.location.reload(); 
					},1000);
	    	}else {
	    		 toastr.warning("保存失败"); 
	    	}
	    	
	    });

	    //表格设置
	    $table.bootstrapTable({
	        url: '${pageContext.request.contextPath }/datas/data2.json',
	        clickEdit: true,
	        striped : true, //是否显示行间隔色
	        columns: [{
	            field: 'remark',
	            width : '30%',
	            title: '摘要'
	        }, {
	            field: 'cid',
	            title: '科目',
	            width : '30%',
	            editable:{
	                type: "select",              //编辑框的类型。支持text|textarea|select|date|checklist等
	                source: selectArr,
	                title: "选择科目",           //编辑框的标题
	                disabled: false,           //是否禁用编辑
	                emptytext: "空文本",       //空值的默认文本
	                mode: "inline",            //编辑框的模式：支持popup和inline两种模式，默认是popup
	                validate: function (value) { //字段验证
	                    if (!$.trim(value)) {
	                        return '不能为空';
	                    }
	                }
	            }
	        }, {
	            field: 'money',
	            title: '金额'
	        }, ],
	        /**
	         * @param {点击列的 field 名称} field
	         * @param {点击列的 value 值} value
	         * @param {点击列的整行数据} row
	         * @param {td 元素} $element
	         */
	        onClickCell: function(field, value, row, $element) {
	        	if(field == "cid") {
	        		return;
	        	}
	            $element.attr('contenteditable', true);
	            $element.blur(function() {
	                let index = $element.parent().data('index');
	                let tdValue = $element.html();

	                saveData(index, field, tdValue);
	            })
	        },
	         
	   		events: {'change .form-control': function (e, value, row, index) {
		   		 $('#table').bootstrapTable('updateCell', {
			   		  index: index,
			   		  field: row.item,
			   		  value: value
		   		 })
	   			}
	        }
	    });
	   
	    function saveData(index, field, value) {
	        $table.bootstrapTable('updateCell', {
	            index: index,       //行索引
	            field: field,       //列名
	            value: value        //cell值
	        })
	    }

	});
	
	toastr.options.positionClass = 'toast-top-center'; //提示框的位置设置为中上 
</script>
</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">填写&nbsp;&nbsp;-&nbsp;&nbsp;费用信息</div>
     <div class="panel-body">
    	<form class="form-inline" role="form" id="addForm" method="post">
		    <div class="table-box" style="margin: 20px;">
			       <!-- <button id="add" class="btn btn-primary">新增</button> 
			        <button id="getTableData" type="button"  class="btn btn-primary">getTableData</button>-->
			        <button id="save" type="button" class="btn btn-primary">保存</button>
			        
			        <div class="form-group" style="float: right;">
			         	<label class="control-label">时间:</label>
				  		<input class="form_datetime form-control" type="text" id="createTime" name="createTime" readonly style="width: 130px; margin-right: 3px;" >
			  		</div>
			  		
			   		<table id="table"></table>
			</div>
		</form>
	</div>
</div>
</body>
</html>